
import Vue from 'vue';
import App from './App';
import router from './router';

import Scrollbar from 'smooth-scrollbar';
import Grid from '@/assets/js/grid';
import fn from '@/assets/js/fn';

console.log(fn);

// import style
import '@/assets/scss/reset.scss';
import '@/assets/scss/base.scss';

Vue.config.productionTip = false

const eventBus = new Vue();

Vue.prototype.eventBus = eventBus;
Vue.prototype.Grid = Grid;
Vue.prototype.fn = fn;

// console.log(Grid);

Vue.component('scrollbar', {
    render(h){
        return h('div', {
            'class': 'scrollbar',
            style: {
                width: '100%',
                height: '100%'
            },
            ref: 'bar'
        }, this.$slots.default);
    },
    props: {
        initOptions: {
            default: function () {
                return {};
            }
        },
    },
    mounted(){
        this.bar = this.initScrollbar();
        this.eventBus.$on('back2top', (speed) => {
            this.back2top(speed);
        });
        this.eventBus.$on('scrollTo', (y, speed) => {
            this.scrollTo(y, speed);
        });
    },
    methods: {
        initScrollbar(){
            return Scrollbar.init(this.$refs.bar, this.initOptions);
        },
        back2top(speed){
            this.bar.scrollTo(0, 0, speed);
        },
        scrollTo(y, speed){
            this.bar.scrollTo(y, speed);
        }
    }
});

Vue.component('back2top', {
    render(h){
        return h('div', {
            'class': {
                'back2top': true
            },
            on: {
                click: this.back2top
            },
            ref: 'back2top'
        });
    },
    props: {
        speed: {
            type: Number,
            default: 800
        }
    },
    mounted(){
    
    },
    methods: {
        back2top(){
            this.eventBus.$emit('back2top', this.speed);
        }
    }
})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
